<template>
    <a-card
        :title="item.title"
        :bordered="item.bordered"
        v-for="(item, index) in data"
        :key="`${index}a`"
        style="margin-bottom: 10px"
    >
        <div class="list">
            <div
                class="sub"
                v-for="(list, listIndex) in item.list"
                :key="`${listIndex}b`"
                @click="onAddData(list.name, item.sjyfl)"
            >
                <img :src="list.icon" alt="" />
                <p>{{ list.name }}</p>
            </div>
        </div>
    </a-card>
    <a-modal
        width="800px"
        centered
        v-model:visible="visible"
        :title="title"
        @ok="onHandleOk"
    >
        <a-form
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 14 }"
            :model="form"
        >
            <a-form-item
                label="数据来源："
                required
                v-bind="validateInfos.sjly"
            >
                <a-input
                    v-model:value="form.sjly"
                    placeholder="请输入数据来源"
                ></a-input>
            </a-form-item>
            <a-form-item
                label="数据来源名称："
                required
                v-bind="validateInfos.sjymc"
            >
                <a-input v-model:value="form.sjymc" placeholder=""></a-input>
            </a-form-item>
            <a-form-item label="ip地址：" required v-bind="validateInfos.ip">
                <a-input v-model:value="form.ip" placeholder=""></a-input>
            </a-form-item>
            <a-form-item label="端口号：" required v-bind="validateInfos.port">
                <a-input v-model:value="form.port"></a-input>
            </a-form-item>
            <a-form-item label="数据库实例：">
                <a-input v-model:value="form.sid" placeholder=""></a-input>
                <div style="font-size: 12px">
                    <InfoCircleFilled />数据库实例，
                </div>
            </a-form-item>
            <a-form-item label="用户名：" required v-bind="validateInfos.yhm">
                <a-input v-model:value="form.yhm" placeholder=""></a-input>
            </a-form-item>
            <a-form-item
                label="访问密码："
                required
                v-bind="validateInfos.fwmm"
            >
                <a-input v-model:value="form.fwmm" placeholder=""></a-input>
            </a-form-item>
            <a-form-item label="数据库版本：">
                <a-input v-model:value="form.version" placeholder=""></a-input>
            </a-form-item>
            <!-- <a-form-item label="是否启用：">
                <a-switch
                    :checked="form.isable === '1'"
                    @click="onToggleChecked"
                />
            </a-form-item> -->
            <a-form-item label="备注：">
                <a-textarea
                    v-model:value="form.bz"
                    showCount
                    :maxlength="500"
                />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button key="back" @click="onHandleCancel">关闭</a-button>
            <a-button
                key="submit"
                type="primary"
                :loading="loading"
                @click="onHandleOk"
                >确认</a-button
            >
        </template>
    </a-modal>
</template>

<script lang="ts">
import { submitData } from "@/api/index";
import { useForm } from "@ant-design-vue/use";
import { defineComponent, reactive, toRefs } from "vue";
import { InfoCircleFilled } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
interface modalStatus {
    loading: boolean;
    visible: boolean;
    title: string;
}
interface form {
    sjylx: string;
    sjyfl: string;
    sjly: string;
    sjymc: string;
    ip: string | number;
    port: string | number;
    sid: string;
    yhm: string;
    fwmm: string | number;
    version: string | number;
    isable: string;
    bz: string;
}
export default defineComponent({
    name: "DataAdd",
    setup() {
        const data = [
            {
                title: "关系型数据库",
                bordered: false,
                sjyfl: "5",
                list: [
                    { name: "Mysql", icon: "assets/mysql.png" },
                    { name: "Oracle", icon: "assets/oracle.png" },
                    { name: "SqlServer", icon: "assets/sqlserver.png" },
                    { name: "PostgreSql", icon: "assets/postgreSQL.png" },
                    { name: "BM DB2", icon: "assets/db2.png" },
                    { name: "Greenplum", icon: "assets/Greenplum.png" },
                    { name: "SPA HANA", icon: "assets/hana.png" },
                    { name: "Hive DB", icon: "assets/hive.png" },
                    { name: "DM DB", icon: "assets/hive.png" },
                ],
            },
            {
                title: "BigData数据源",
                bordered: false,
                sjyfl: "7",
                list: [
                    { name: "Elasticsearch", icon: "assets/Elasticsearch.png" },
                    { name: "Hbase", icon: "assets/Hbase.png" },
                    { name: "MongDB", icon: "assets/mongoDB.png" },
                ],
            },
            {
                title: "本地文件数据源",
                bordered: false,
                list: [{ name: "本地文件", icon: "assets/file.png" }],
            },
        ];
        const modalStatus = reactive<modalStatus>({
            loading: false,
            visible: false,
            title: "",
        });
        const form = reactive<form>({
            sjylx: "",
            sjyfl: "",
            sjly: "",
            sjymc: "",
            ip: "",
            port: "",
            sid: "",
            yhm: "",
            fwmm: "",
            version: "",
            isable: "1",
            bz: "",
        });
        const rulesRef = reactive({
            sjly: [{ required: true, message: "" }],
            sjymc: [{ required: true, message: "" }],
            ip: [{ required: true, message: "" }],
            port: [{ required: true, message: "" }],
            yhm: [{ required: true, message: "" }],
            fwmm: [{ required: true, message: "" }],
        });
        const { resetFields, validate, validateInfos } = useForm(
            form,
            rulesRef
        );
        const state = reactive({
            onAddData: (name: string, sjyfl: string) => {
                form.sjylx = name;
                form.sjyfl = sjyfl;
                modalStatus.title = `新增${name}数据源`;
                modalStatus.visible = true;
            },
            onHandleOk: () => {
                validate()
                    .then(() => {
                        modalStatus.loading = true;
                        submitData(form).then(({ msg }: any) => {
                            message.warning(msg);
                            resetFields();
                            modalStatus.loading = false;
                            modalStatus.visible = false;
                        });
                    })
                    .catch((err) => {
                        message.warning(err);
                        modalStatus.loading = false;
                        modalStatus.visible = false;
                    });
            },
            onHandleCancel: () => {
                resetFields();
                modalStatus.loading = false;
                modalStatus.visible = false;
            },
            onToggleChecked: (checked: boolean, event: Event) => {
                form.isable = checked ? "1" : "0";
            },
        });
        return {
            data,
            form,
            validateInfos,
            ...toRefs(state),
            ...toRefs(modalStatus),
        };
    },
    components: {
        InfoCircleFilled,
    },
});
</script>
<style lang="less" scoped>
.ant-form-item {
    margin-bottom: 2px;
}
.list {
    display: flex;
    flex-wrap: wrap;
    .sub {
        width: 64px;
        text-align: center;
        position: relative;
        cursor: pointer;
        margin-right: 2%;
        margin-bottom: 2%;
        p {
            margin-bottom: 0;
        }
        img {
            display: inline-block;
            width: 100%;
            height: 64px;
        }
    }
}
</style>